web前端学习资源分享

发表于 | 更新于 | 分类于
本文字数： 44k | 阅读时长 ≈ 40 分钟

你以为 CSS 只是个简单的布局？

CSS3 奇思妙想

前几天看了一篇文章 ， 颠覆了我对 CSS 认识，心中无数次蹦出一个念头：’卧槽，卧槽，还能特么这么用，这特么太叼了’ …

于是我迫不及待想跟你们一起分享分享，以后你也可以在别人面前炫（装）耀（逼）了~

ps：本文原创不是我，我只是搬运工，看到好东西与大家分享而已，作者 github 主页请戳 这里~

装逼指南

本文中，所有的图形都是在单个标签内实现的，大量使用了 CSS3 中的 ::before、::after 伪元素，transparent 、border，多重线性与径向渐变，多重内外阴影，如果你的效果不尽人意，请尝试在 Chrome 浏览器下预览。

装逼技巧

本文所有图形都会有个容器 <div class="css-cell"></div>包裹，其样式结构如下：

1
2
3
4
5
.css-cell{
    position: relative;
    width: 100%;
    height: 300px;
}

所有图形都是在容器内实现的，其结构如下：

1
2
3
4
<!--heart-->
<div class="css-cell">
    <div class="heart"></div>
</div>

天气那一块有部分会多一个容器，其结构如下：

1
2
3
4
5
<div class="css-cell ">
    <div class="breeze-container">
        <div class="breeze"></div>
    </div>
</div>

为了方便起见，下面图形的具体实现，我只会贴出对应的类相应的样式代码~

装逼实战

  • 爱心

爱心

利用 div 的正方形和伪类的圆型组合而成，具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*heart*/
.heart{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background: red;
    width: 100px;
    height: 100px;
}
.heart:before,
.heart:after
{
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;
}
.heart:after{
    top: -50px;
    left: 0;
}
  • 气泡悬浮框

气泡悬浮框

利用 border 结合 transparent 特性实现，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/*bubbly*/
.bubbly{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    background: #00ccbb;
    border-radius: 8px;
    width: 200px;
    padding: 40px 10px;
    text-align: center;
    color: white;
    font-size: 20px;
}
.bubbly:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    border: 34px solid transparent;
    border-top-color: #00ccbb;
    border-bottom: 0;
    border-left: 0;
    margin: 0 0 -34px -17px;
}
  • 切角

切角

利用使用线性渐变实现的，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*notching*/
.notching{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 200px;
    padding: 60px 20px;
}
.notching{
    background:
            linear-gradient(135deg, transparent 15px, deeppink 0)
            top left,
            linear-gradient(-135deg, transparent 15px, deeppink 0)
            top right,
            linear-gradient(-45deg, transparent 15px, deeppink 0)
            bottom right,
            linear-gradient(45deg, transparent 15px, deeppink 0)
            bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}
  • 弧形切角

弧形切角

使用径向渐变实现，具体实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*arc*/
.arc{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 80px;
    padding: 80px;
}
.arc {
    background:
            radial-gradient(circle at top left,
            transparent 15px, yellowgreen 0) top left,
            radial-gradient(circle at top right,
            transparent 15px, yellowgreen 0) top right,
            radial-gradient(circle at bottom right,
            transparent 15px, yellowgreen 0) bottom right,
            radial-gradient(circle at bottom left,
            transparent 15px, yellowgreen 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}
  • 梯形

梯形

利用伪类加旋转透视实现，具体实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*trapezoid*/
.trapezoid{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 160px;
    padding: 60px;
}
.trapezoid:before{
    content:"";
    position: absolute;
    top: 0; 
    right: 0;
    bottom: 0; 
    left: 0;
    transform:perspective(40px) scaleY(1.3) rotateX(5deg);
    transform-origin: bottom;
    background:dodgerblue;
    z-index:-1;
}
  • 饼图

饼图

利用伪类、线性渐变、旋转实现，具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*pie*/
.pie{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 200px;
    height:200px;
    border-radius:50%;
    text-align: center;
    background-color:yellowgreen;
    overflow:hidden;
    background-image: linear-gradient(to right, transparent 50%, #655 0);
    cursor:pointer;
}
.pie:before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:50%;
    height:100%;
    background-color: inherit;
    transform-origin: left;
    z-index:-1;
    transform:rotate(.1turn);
}
.pie:hover:before{
    transition:all 1s;
    transform:rotate(.45turn);
}
  • 平行四边形

平行四边形

利用伪类、拉伸实现，实现过程如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*parallelogram*/
.parallelogram{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 200px;
    height:120px;

}
.parallelogram:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color:#00aabb;
    z-index:-1;
    transform: skew(.08turn);
}
  • 折角

折角

利用切角、伪类、渐变、旋转实现，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*corner*/
.corner{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 120px;
    height:120px;
    padding:40px;
    background:linear-gradient(-150deg,transparent 1.5em, yellowgreen  0);
    border-radius:8px;
}
.corner:before{
    content: '';
    position: absolute;
    top: 0; right: 0;
    background: linear-gradient(to left bottom,transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat;
    width: 1.73em;
    height: 3em;
    transform: translateY(-1.3em) rotate(-30deg);
    transform-origin: bottom right;
    border-bottom-left-radius: inherit;
    box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
}
  • 纯 CSS 方案实现背景变暗效果（hover按钮触发）

hover之前

鼠标移入

hover之后

利用 box-shadow 实现，具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*spectiveBlur*/
.spectiveBlur{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220px;
    height:160px;
    transform: translate(-50%, -50%);
    border-radius:10px;
    overflow:hidden;
    background:#E91E63;
    cursor:pointer;
    transition: transform .2s;
}
.spectiveBlur:hover{
    box-shadow:0 0 0 1920px rgba(0,0,0,.7);
    transform: translate(-50%, -50%) scale(1.2);
}
  • 条纹背景图

主要是利用渐变实现，具体实现如下：

条纹背景图

1
2
3
4
5
6
7
8
9
10
11
12
/*stripe*/
.stripe{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 200px;
    height:200px;
    background:deeppink;
    border-radius:.5em;
    background:repeating-linear-gradient(45deg,#CC9999, #CC9999 15px, #CCCCCC 0, #CCCCCC 30px)
}

条纹背景图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*wave-stripe*/
.wave-stripe{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 200px;
    height:200px;
    border-radius:.5em;
    background:
            linear-gradient(135deg, deeppink 25%, transparent 25%) -50px 0,
            linear-gradient(225deg, deeppink 25%, transparent 25%) -50px 0,
            linear-gradient(315deg, deeppink 25%, transparent 25%),
            linear-gradient(45deg, deeppink 25%, transparent 25%);
    background-size: 40px 40px;
}

条纹背景图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*arrow-stripe*/
.arrow-stripe{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 200px;
    height:200px;
    border-radius:.5em;
    background:
            linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
            linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
            linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
    background-color:#e1ebbd;
    background-size: 128px 128px;
}
  • 混合模式背景图

混合模式背景图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.colorful-stripe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 200px;
    text-align: center;
    color: #fff;
    font-size: 200%;
    border-radius: .5em;
    background:
            linear-gradient(limegreen, transparent), linear-gradient(90deg, skyblue, transparent), linear-gradient(-90deg, coral, transparent);
    background-blend-mode: screen;
}
  • 太阳

sun

利用线性渐变、阴影、旋转实现，具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/*sun*/
.sun{
    position: absolute;
    top: 50%;
    left: 50%;
    width:200px;
    height:260px;
    transform: translate(-50%, -50%);
    background:#0BF;
    border-radius:5px;
}
.sun:before{
    content:"";
    position: absolute;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius:50%;
    background:rgba(255, 238, 68, 1);
    box-shadow: 0 0 0 15px rgba(255,255,0,0.2),0 0 15px #fff;
    z-index:-10;
}
.sun:after{
    content:"";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 160px;
    width: 160px;
    transform: translate(-50%, -50%) rotate(30deg);
    z-index:-100;
    background-image:
            -webkit-linear-gradient(top,rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%),
            -webkit-linear-gradient(left,rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    background-size: 20px 100%, 100% 20px;
    background-repeat: no-repeat;
    background-position: center center, center center;
    animation:sunRotate 10s linear infinite;
}
@keyframes sunRotate{
    0%{
        transform: translate(-50%, -50%) rotate(30deg);
    }
    100%{
        transform: translate(-50%, -50%) rotate(390deg);
    }
}
  • 多云

cloud

利用线性渐变、阴影、缩放实现，具体实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/*cloudy*/
.cloudy{
    position: absolute;
    top: 50%;
    left: 50%;
    width:200px;
    height:260px;
    transform: translate(-50%, -50%);
    background:#2EB5E5;
    border-radius:5px;
}
.cloudy:before {
    content: "";
    text-indent:23px;
    font-size:22px;
    line-height:40px;
    color:#333;
    position: absolute;
    height: 50px;width: 50px;
    background: #FFFFFF;
    left:30%;
    top:45%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow:
            #FFFFFF 65px -15px 0 -5px,
            #FFFFFF 25px -25px,
            #FFFFFF 30px 10px,
            #FFFFFF 60px 15px 0 -10px,
            #FFFFFF 85px 5px 0 -5px,
            #C8C8C8 35px -35px,
            #C8C8C8 66px -27px 0 -5px,
            #C8C8C8 91px -10px 0 -8px;
    animation: cloudy 5s ease-in-out infinite;
}
.cloudy:after{
    content:"";
    position: absolute;
    top: 80%;
    left: 50%;
    height: 15px;
    width: 120px;
    background:rgba(0,0,0,.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: cloudy_shadow 5s ease-in-out infinite;
}
@keyframes cloudy {
    50%{
        transform: translate(-50%, -70%);
    }
    100%{
        transform: translate(-50%, -50%);
    }
}
@keyframes cloudy_shadow {
    50%{
        transform: translate(-50%, -50%) scale(0.8);
        background:rgba(0,0,0,.2);
    }
    100%{
        transform: translate(-50%, -50%) scale(1);
        background:rgba(0,0,0,.5);
    }
}

cloud2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/*cloudy2*/
.cloudy2{
    position: absolute;
    top: 50%;
    left: 50%;
    width:200px;
    height:260px;
    transform: translate(-50%, -50%);
    background:#2EB5E5;
    border-radius:5px;
}
.cloudy2:before {
    content: "";
    text-indent:23px;
    font-size:22px;
    line-height:40px;
    color:#333;
    position: absolute;
    height: 50px;width: 50px;
    background: #FFFFFF;
    left:30%;
    top:55%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index:100;
    box-shadow:
            #FFFFFF 65px -15px 0 -5px,
            #FFFFFF 25px -25px,
            #FFFFFF 30px 10px,
            #FFFFFF 60px 15px 0 -10px,
            #FFFFFF 85px 5px 0 -5px;
    animation: cloudy2 5s ease-in-out infinite;
}
.cloudy2:after{
    content:"";
    position: absolute;
    top: 45%;left: 63%;
    height: 60px;
    width: 60px;
    z-index:10;
    background:linear-gradient(180deg,#FE9F38 0%, #F46635 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px 4px #FFA563;
    animation: cloudy2 10s ease-in-out infinite;
}
@keyframes cloudy2 {
    50%{
        transform: translate(-50%, -70%);
    }
    100%{
        transform: translate(-50%, -50%);
    }
}
  • 雨

rain

利用线性渐变、阴影、缩放实现，具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/*rainy*/
.rainy {
    position: absolute;
    width: 3px;
    height: 6px;
    top: 30%;
    left: 50%;
    background: #CCCCCC;
    border-radius: 50%;
    animation: rainy_rain .7s infinite linear;
}
.rainy:before {
    content: "";
    color: #333;
    position: absolute;
    height: 50px;
    width: 50px;
    top: 30px;
    left: -40px;
    background: #CCC;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: #CCC 65px -15px 0 -5px, #CCC 25px -25px, #CCC 30px 10px, #CCC 60px 15px 0 -10px, #CCC 85px 5px 0 -5px;
    animation: cloudy 5s ease-in-out infinite;
}
.rainy:after {
    content: "";
    position: absolute;
    top: 120px;
    left: 50%;
    height: 15px;
    width: 120px;
    background: rgba(0, 0, 0, .5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: cloudy_shadow 5s ease-in-out infinite;
}
@keyframes cloudy {
    50% {
        transform: translate(-50%, -70%);
    }
    100% {
        transform: translate(-50%, -50%);
    }
}
@keyframes cloudy_shadow {
    50% {
        transform: translate(-50%, -50%) scale(0.8);
        background: rgba(0, 0, 0, .2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        background: rgba(0, 0, 0, .5);
    }
}
@keyframes rainy_rain {
    0% {
        box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px, rgba(0, 0, 0, .3) -50px 75px, rgba(0, 0, 0, .3) 55px 50px, rgba(0, 0, 0, .3) -18px 100px, rgba(0, 0, 0, .3) 12px 95px, rgba(0, 0, 0, .3) -31px 45px, rgba(0, 0, 0, .3) 30px 35px;
    }
    25% {
        box-shadow: rgba(0, 0, 0, .3) -10px 45px, rgba(0, 0, 0, .3) 40px 60px, rgba(0, 0, 0, .3) -50px 90px, rgba(0, 0, 0, .3) 55px 65px, rgba(0, 0, 0, 0) -18px 120px, rgba(0, 0, 0, 0) 12px 120px, rgba(0, 0, 0, .3) -31px 70px, rgba(0, 0, 0, .3) 30px 60px;
    }
    26% {
        box-shadow: rgba(0, 0, 0, .3) -10px 45px, rgba(0, 0, 0, .3) 40px 60px, rgba(0, 0, 0, .3) -50px 90px, rgba(0, 0, 0, .3) 55px 65px, rgba(0, 0, 0, 0) -18px 40px, rgba(0, 0, 0, 0) 12px 20px, rgba(0, 0, 0, .3) -31px 70px, rgba(0, 0, 0, .3) 30px 60px;
    }
    50% {
        box-shadow: rgba(0, 0, 0, .3) -10px 70px, rgba(0, 0, 0, .3) 40px 80px, rgba(0, 0, 0, 0) -50px 100px, rgba(0, 0, 0, .3) 55px 80px, rgba(0, 0, 0, .3) -18px 60px, rgba(0, 0, 0, .3) 12px 45px, rgba(0, 0, 0, .3) -31px 95px, rgba(0, 0, 0, .3) 30px 85px;
    }
    51% {
        box-shadow: rgba(0, 0, 0, .3) -10px 70px, rgba(0, 0, 0, .3) 40px 80px, rgba(0, 0, 0, 0) -50px 45px, rgba(0, 0, 0, .3) 55px 80px, rgba(0, 0, 0, .3) -18px 60px, rgba(0, 0, 0, .3) 12px 45px, rgba(0, 0, 0, .3) -31px 95px, rgba(0, 0, 0, .3) 30px 85px;
    }
    75% {
        box-shadow: rgba(0, 0, 0, .3) -10px 95px, rgba(0, 0, 0, .3) 40px 100px, rgba(0, 0, 0, .3) -50px 60px, rgba(0, 0, 0, 0) 55px 95px, rgba(0, 0, 0, .3) -18px 80px, rgba(0, 0, 0, .3) 12px 70px, rgba(0, 0, 0, 0) -31px 120px, rgba(0, 0, 0, 0) 30px 110px;
    }
    76% {
        box-shadow: rgba(0, 0, 0, .3) -10px 95px, rgba(0, 0, 0, .3) 40px 100px, rgba(0, 0, 0, .3) -50px 60px, rgba(0, 0, 0, 0) 55px 35px, rgba(0, 0, 0, .3) -18px 80px, rgba(0, 0, 0, .3) 12px 70px, rgba(0, 0, 0, 0) -31px 25px, rgba(0, 0, 0, 0) 30px 15px;
    }
    100% {
        box-shadow: rgba(0, 0, 0, 0) -10px 120px, rgba(0, 0, 0, 0) 40px 120px, rgba(0, 0, 0, .3) -50px 75px, rgba(0, 0, 0, .3) 55px 50px, rgba(0, 0, 0, .3) -18px 100px, rgba(0, 0, 0, .3) 12px 95px, rgba(0, 0, 0, .3) -31px 45px, rgba(0, 0, 0, .3) 30px 35px;
    }
}
  • 微风

wind

利用border、transparent、实现，这个会多一层 div.breeze-container 包裹，样式代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/*breeze*/
.breeze-container{
    position: absolute;
    top: 50%;left: 50%;
    width:200px;height:260px;
    transform: translate(-50%, -50%);
    text-align:center;
    font-size:200%;
    color:#fff;
    background:#00BBFF;
    border-radius:5px;
}
.breeze-container:after{
    content:"";
    position:absolute;
    top:58%;
    left:50%;
    transform: translate(-50%, -50%);
    width:6px;
    height:70px;
    background:#fff;
}
.breeze{
    position:absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(1deg);
    border-bottom:60px solid #fff;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    animation: windmill 12s infinite linear;
    transform-origin:50.5% 62px;
}
.breeze:before{
    position:absolute;
    top: 75px;left: -59px;
    content:"";
    border-right:60px solid #fff;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    transform:rotate(-30deg);
}
.breeze:after{
    position:absolute;
    top: 75px;left: -1px;
    content:"";
    border-left:60px solid #fff;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    transform:rotate(30deg);
}
@keyframes windmill{
    0%{
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100%{
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
  • 彩虹

rainbow

主要是利用border、box-shadow 实现，具体实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/*rainbow*/
.rainbow-container{
    position: absolute;
    top: 50%;
    left: 50%;
    width:200px;
    height:260px;
    transform: translate(-50%, -50%);
    background:#F3D166;
    border-radius:5px;
}
.rainbow{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 1px;width: 1px;
}
.rainbow:before{
    content:"";
    position:absolute;
    top: 50%;left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    height: 70px;width: 70px;
    border-radius: 100px 0 0 0;
    box-shadow:
            #F44336 -2px -2px 0 1px,
            #FF9800 -4px -4px 0 3px,
            #FFEB3B -6px -6px 0 5px,
            #8BC34A -8px -8px 0 7px,
            #00BCD4 -10px -10px 0 9px,
            #2196F3 -12px -12px 0 11px,
            #9C27B0 -14px -14px 0 13px;
    animation: rainbow 5s ease-in-out infinite;
}
.rainbow:after{
    content: "";
    position: absolute;
    top: 70px;
    left: 50%;
    height: 15px;
    width: 120px;
    background: rgba(0, 0, 0, .5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: cloudy_shadow 5s ease-in-out infinite;
}
@keyframes rainbow {
    50% {
        transform: translate(-50%, -55%) rotate(30deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(45deg);
    }
}
@keyframes cloudy_shadow {
    50% {
        transform: translate(-50%, -50%) scale(0.8);
        background: rgba(0, 0, 0, .2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        background: rgba(0, 0, 0, .5);
    }
}
  • 夜空

moon

主要是利用 box-shadow 实现 ， 实现方式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/*starry*/
.starry-container{
    position: absolute;
    top: 50%;
    left: 50%;
    width:200px;
    height:260px;
    transform: translate(-50%, -50%);
    background:#222233;
    border-radius:5px;
}
.starry{
    position:absolute;
    top: 30%;left: 40%;
    transform: translate(-50%, -50%);
    height: 4px;width: 4px;
    border-radius:50%;
    box-shadow:
            #FFFFFF -26px 77px 0 -1px,
            rgba(255,255,255,0.1) -36px 59px 0 -1px,
            rgba(255,255,255,0.1) -28px 89px 0 -1px,
            #FFFFFF -35px 20px 0 -1px,
            #FFFFFF 14px 100px,
            rgba(255,255,255,0.1) 41px 60px,
            #FFFFFF 34px 39px,
            rgba(255,255,255,0.1) 14px 45px 0 -1px,
            #FFFFFF 64px 12px 0 -1px,
            rgba(255,255,255,0.1) 32px 96px 0 -1px,
            #FFFFFF 64px 71px,
            rgba(255,255,255,0.1) 60px 18px 0 -1px,
            #FFFFFF 34px 9px,
            rgba(255,255,255,0.1) -26px 55px 0 -1px;
    animation: starry_star 5s ease-in-out infinite;
}
.starry:before{
    content:"";
    position:absolute;
    top: 20%;left: 50%;
    width:100px;height:100px;
    box-shadow: #FFFFFF -25px 0;
    transform: rotate(-5deg);
    border-radius: 50%;
    animation: starry 5s ease-in-out infinite;
}
@keyframes starry {
    50% {
        transform: rotate(10deg);
    }
}
@keyframes starry_star{
    50%{
        box-shadow:
                rgba(255,255,255,0.1) -26px 77px 0 -1px,
                #FFF -36px 59px 0 -1px,
                #FFF -28px 89px 0 -1px,
                rgba(255,255,255,0.1) -35px 20px 0 -1px,
                rgba(255,255,255,0.1) 14px 100px,
                #FFF 41px 60px,
                rgba(255,255,255,0.1) 34px 39px,
                #FFF 14px 45px 0 -1px,
                rgba(255,255,255,0.1) 64px 12px 0 -1px,
                #FFF 32px 96px 0 -1px,
                rgba(255,255,255,0.1) 64px 71px,
                #FFF 60px 18px 0 -1px,
                rgba(255,255,255,0.1) 34px 9px,
                #FFF -26px 55px 0 -1px;
    }
}
  • 雷电

thunder

主要是利用阴影、border实现，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/*thunder*/
.thunder-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 260px;
    transform: translate(-50%, -50%);
    background: #444;
    border-radius: 5px;
}
.thunder {
    color: #333;
    position: absolute;
    height: 50px;
    width: 50px;
    top: 40%;
    left: 30%;
    background: #222;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow:
            #222 65px -15px 0 -5px,
            #222 25px -25px,
            #222 30px 10px,
            #222 60px 15px 0 -10px,
            #222 85px 5px 0 -5px;
    animation: cloudy 5s ease-in-out infinite;
}
.thunder:before {
    content: "";
    position: absolute;
    top: 60px;
    left: 60px;
    border-left: 0px solid transparent;
    border-right: 8px solid transparent;
    border-top: 38px solid yellow;
    box-shadow: yellow -7px -32px;
    transform:rotate(30deg);
    transform-origin:center -50px;
    animation:stormy_thunder 2s steps(1, end) infinite;;
}
.thunder:after {
    content: "";
    position: absolute;
    top: 120px;
    left: 64px;
    height: 15px;
    width: 120px;
    background: rgba(0, 0, 0, .5);
    border-radius: 50%;
    z-index:-1;
    transform: translate(-50%, -50%);
    animation: cloudy_shadow 5s ease-in-out infinite;
}
@keyframes cloudy {
    50% {
        transform: translate(-50%, -30px);
    }
}
@keyframes cloudy_shadow {
    50% {
        transform: translate(-50%, 0) scale(0.8);
        background: rgba(0, 0, 0, .2);
    }
}
@keyframes stormy_thunder{
    0%  {  transform: rotate(30deg); opacity:1; }
    5%  {  transform: rotate(-34deg); opacity:1; }
    10% {  transform: rotate(0deg); opacity:1; }
    15% {  transform: rotate(-34deg); opacity:0; }
}
  • 大雪

snow

利用阴影实现 ， 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
/*snow*/
.snowy-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 260px;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 200%;
    color: #fff;
    background: #607D8B;
    border-radius: 5px;
}
.snowy {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius:50%;
    top: 30%;
    left: 50%;
    background: #fff;
    border-radius: 50%;
    animation: snowy_rain 2s infinite linear;
}
.snowy:before {
    content: "";
    color: #333;
    position: absolute;
    height: 50px;
    width: 50px;
    top: 30px;
    left: -40px;
    background: #eee;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow:
            #eee 65px -15px 0 -5px,
            #eee 25px -25px,
            #eee 30px 10px,
            #eee 60px 15px 0 -10px,
            #eee 85px 5px 0 -5px;
    animation: cloudy 5s ease-in-out infinite;
}
.snowy:after {
    content: "";
    position: absolute;
    top: 120px;
    left: 50%;
    height: 15px;
    width: 120px;
    background: rgba(0, 0, 0, .5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: cloudy_shadow 5s ease-in-out infinite;
}
@keyframes cloudy {
    50% {
        transform: translate(-50%, -70%);
    }
    100% {
        transform: translate(-50%, -50%);
    }
}
@keyframes cloudy_shadow {
    50% {
        transform: translate(-50%, -50%) scale(0.8);
        background: rgba(0, 0, 0, .2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        background: rgba(0, 0, 0, .5);
    }
}
@keyframes snowy_rain {
    0% {
        box-shadow:
                rgba(255, 255, 255, 0) -10px 30px,
                rgba(255, 255, 255, 0) 40px 40px,
                rgba(255, 255, 255, .6) -50px 75px,
                rgba(255, 255, 255, .6) 55px 50px,
                rgba(255, 255, 255, .6) -18px 100px,
                rgba(255, 255, 255, .6) 12px 95px,
                rgba(255, 255, 255, .6) -31px 45px,
                rgba(255, 255, 255, .6) 30px 35px;
    }
    25% {
        box-shadow:
                rgba(255, 255, 255, .6) -10px 45px,
                rgba(255, 255, 255, .6) 40px 60px,
                rgba(255, 255, 255, .6) -50px 90px,
                rgba(255, 255, 255, .6) 55px 65px,
                rgba(255, 255, 255, 0) -18px 120px,
                rgba(255, 255, 255, 0) 12px 120px,
                rgba(255, 255, 255, .6) -31px 70px,
                rgba(255, 255, 255, .6) 30px 60px;
    }
    26% {
        box-shadow:
                rgba(255, 255, 255, .6) -10px 45px,
                rgba(255, 255, 255, .6) 40px 60px,
                rgba(255, 255, 255, .6) -50px 90px,
                rgba(255, 255, 255, .6) 55px 65px,
                rgba(255, 255, 255, 0) -18px 40px,
                rgba(255, 255, 255, 0) 12px 20px,
                rgba(255, 255, 255, .6) -31px 70px,
                rgba(255, 255, 255, .6) 30px 60px;
    }
    50% {
        box-shadow:
                rgba(255, 255, 255, .6) -10px 70px,
                rgba(255, 255, 255, .6) 40px 80px,
                rgba(255, 255, 255, 0) -50px 100px,
                rgba(255, 255, 255, .6) 55px 80px,
                rgba(255, 255, 255, .6) -18px 60px,
                rgba(255, 255, 255, .6) 12px 45px,
                rgba(255, 255, 255, .6) -31px 95px,
                rgba(255, 255, 255, .6) 30px 85px;
    }
    51% {
        box-shadow:
                rgba(255, 255, 255, .6) -10px 70px,
                rgba(255, 255, 255, .6) 40px 80px,
                rgba(255, 255, 255, 0) -50px 45px,
                rgba(255, 255, 255, .6) 55px 80px,
                rgba(255, 255, 255, .6) -18px 60px,
                rgba(255, 255, 255, .6) 12px 45px,
                rgba(255, 255, 255, .6) -31px 95px,
                rgba(255, 255, 255, .6) 30px 85px;
    }
    75% {
        box-shadow:
                rgba(255, 255, 255, .6) -10px 95px,
                rgba(255, 255, 255, .6) 40px 100px,
                rgba(255, 255, 255, .6) -50px 60px,
                rgba(255, 255, 255, 0) 55px 95px,
                rgba(255, 255, 255, .6) -18px 80px,
                rgba(255, 255, 255, .6) 12px 70px,
                rgba(255, 255, 255, 0) -31px 120px,
                rgba(255, 255, 255, 0) 30px 110px;
    }
    76% {
        box-shadow:
                rgba(255, 255, 255, .6) -10px 95px,
                rgba(255, 255, 255, .6) 40px 100px,
                rgba(255, 255, 255, .6) -50px 60px,
                rgba(255, 255, 255, 0) 55px 35px,
                rgba(255, 255, 255, .6) -18px 80px,
                rgba(255, 255, 255, .6) 12px 70px,
                rgba(255, 255, 255, 0) -31px 25px,
                rgba(255, 255, 255, 0) 30px 15px;
    }
    100% {
        box-shadow:
                rgba(255, 255, 255, 0) -10px 120px,
                rgba(255, 255, 255, 0) 40px 120px,
                rgba(255, 255, 255, .6) -50px 75px,
                rgba(255, 255, 255, .6) 55px 50px,
                rgba(255, 255, 255, .6) -18px 100px,
                rgba(255, 255, 255, .6) 12px 95px,
                rgba(255, 255, 255, .6) -31px 45px,
                rgba(255, 255, 255, .6) 30px 35px;
    }
}
  • 五角星

五角星

主要是利用border、transparent、旋转实现，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/*star*/
.five-star{
    position: absolute;
    top: 35%;
    right: 50%;
    transform: translate(-50%, -50%) scale(8);
    width: 0;
    height: 0;
    display: block;
    border-left: 3.04px solid transparent;
    border-right: 3.24px solid transparent;
    border-bottom: 10px solid #98DBE3;
    -webkit-filter: drop-shadow(1px .5px 1px #ccc);
    cursor: pointer;
}
.five-star:before{
    content: "";
    position: absolute;
    top: 8.65px;
    left: -8.82px;
    width: 0;
    height: 0;
    color: #98DBE3;
    display: block;
    border-left: 12.5px solid transparent;
    border-right: 12.5px solid transparent;
    border-bottom: 9.08px solid #98DBE3;
    transform-origin: top center;
    transform: rotate(36deg);
}
.five-star:after{
    content: "";
    position: absolute;
    top: 8.65px;
    left: -15px;
    width: 0;
    height: 0;
    color: #98DBE3;
    display: block;
    border-left: 12.5px solid transparent;
    border-right: 12.5px solid transparent;
    border-bottom: 9.08px solid #98DBE3;
    transform-origin: top center;
    transform: rotate(-36deg);
}
  • 太极八卦

太极八卦

利用 box-shadow 实现 ， 代码很简单：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*TaiChi*/
.TaiChi{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    box-shadow:0 0 2px #ddd;
    border-radius:50%;
    background-image:
            radial-gradient(#000 12.5px, transparent 12.5px),
            radial-gradient(#fff 12.5px, transparent 12.5px),
            radial-gradient(#fff 50px, transparent 50px),
            radial-gradient(#000 50px, transparent 50px),
            linear-gradient(90deg,#000 100px, #fff 100px);
    background-position:center 50px,center -50px,center 50px,center -50px,0 0;
}
  • 美队盾牌

美队盾牌

利用 渐变 实现 ， 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/*captainAmerica*/
.captainAmerica{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    background:
            linear-gradient(45deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 65%),
            linear-gradient(-45deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 65%),
            linear-gradient(to right, rgba(0,0,0,0) 35%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 65%),
            linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 65%),
            radial-gradient(ellipse at center, #0033b0 20%, #ce0021 20%, #ce0021 35%, #eee 35%, #eee 55%, #ce0021 55%);
    border-radius: 50%;
    box-shadow: 0 3px 0 #a20917,0 4px 2px 2px #eee;
}
.captainAmerica::before{
    content: '★';
    position:absolute;
    top: 50%;left: 50%;
    transform: translate(-50%, -50%);
    margin-left:-3px;
    width: 50px;height:50px;
    font-family: simsun,Tahoma,Helvetica,Arial,SimHei,sans-serif;
    line-height: 47px;
    z-index: 1;
    border-radius: 50%;
    font-size: 55px;
    color: #fff;
    text-align:center;
    text-shadow: 2px 1px 2px #777;
}
  • 纽扣

纽扣

利用 渐变、阴影 实现 ， 实现方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/*button*/
.button{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    background: #87ceeb;
    border-radius: 50%;
    box-shadow:
            inset 0 5px 5px #87ceeb,
            inset 0 17px 5px rgba(255,255,255,0.7),
            inset 0 -3px 3px rgba(255,255,255,0.3),
            inset 0 -10px 10px rgba(0,0,0,0.3),
            inset 0 -15px 10px #45b3e0,
            0 7px 10px rgba(0,0,0,0.3);
}
.button::before{
    content: '';
    position:absolute;
    top: 50%;left: 50%;
    width: 110px;height: 106px;
    margin-left: -55px;margin-top: -55px;
    background-image:
            radial-gradient(circle at 38px 38px, #333 10px, transparent 10px),
            radial-gradient(circle at 73px 73px, #333 10px, transparent 10px),
            radial-gradient(circle at 38px 73px, #333 10px, transparent 10px),
            radial-gradient(circle at 73px 38px, #333 10px, transparent 10px);
    border-radius: 50%;
    border-top: 1px solid rgba(0,0,0,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.6);
    box-shadow:
            inset 0 20px 2px rgba(255,255,255,0.3),
            3px -15px 7px -4px rgba(0,0,0,0.3),
            0 -14px 10px 5px #45b3e0,
            0 2px 5px 5px #87ceeb,
            0 10px 5px 5px rgba(255,255,255,0.6);
}
.button::after{
    content: '';
    position:absolute;
    top: 50%;left: 50%;
    width: 50px;height: 50px;
    margin-left: -25px;
    margin-top: -23px;
    background-image:
            linear-gradient(to right, transparent 35%, #000080 35%, #4682b4 40%, #000080 45%, #4682b4 50%, #000080 55%, #4682b4 60%, #000080 65%, transparent 65%),
            linear-gradient(to bottom, transparent 35%, #000080 35%, #4682b4 40%, #000080 45%, #4682b4 50%, #000080 55%, #4682b4 60%, #000080 65%, transparent 65%);
    border-radius: 50%;
    transform: rotate(45deg);
}
  • Chrome

Chrome

利用渐变实现 , 具体如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*chrome*/
.Chrome{
    position: absolute;
    top: 50%;left: 50%;
    width: 180px;height: 180px;
    transform: translate(-50%, -50%);
    box-shadow:0 0px 4px #999,0 0 2px #ddd inset;
    border-radius:50%;
    background-image:
            radial-gradient(#4FACF5 0%,#2196F3 28%, transparent 28%),
            radial-gradient(#fff 33%, transparent 33%),
            linear-gradient(-50deg,#FFEB3B 34%, transparent 34%),
            linear-gradient(60deg,#4CAF50 33%, transparent 33%),
            linear-gradient(180deg,#FF756B 0%, #F44336 30%, transparent 30%),
            linear-gradient(-120deg,#FFEB3B 40%, transparent 40%),
            linear-gradient(-60deg,#FFEB3B 30%, transparent 30%),
            linear-gradient(0deg,#4CAF50 45%, transparent 45%),
            linear-gradient(60deg,#4CAF50 30%, transparent 30%),
            linear-gradient(120deg,#F44336 50%, transparent 50%),
            linear-gradient(180deg,#F44336 30%, transparent 30%);
    background-position:0 0;
}
  • Opera

Opera

利用渐变实现 , 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/*Opera*/
.Opera{
    position: absolute;
    top: 50%;left: 50%;
    width: 170px;height: 200px;
    transform: translate(-50%, -50%);
    border-radius:50%;
    box-shadow:0 2px 4px #333;
    background-image:
            linear-gradient(rgb(254, 135, 138) 0%, rgb(231, 22, 22) 50%, rgb(128, 0, 0) 85%, rgb(184, 3, 4) 100%);
}
.Opera:after{
    content:"";
    position: absolute;
    top:50%;left:50%;
    width: 60px;height: 180px;
    transform: translate(-50%, -50%);
    border-radius:50%;
    background:#fff;
}
.Opera:before{
    content:"";
    position: absolute;
    top:50%;left:50%;
    width: 72px;height: 185px;
    transform: translate(-50%, -50%);
    border-radius:50%;
    background:rgba(0,0,0,.4);
}
  • IE

IE

利用渐变、多重阴影实现 ， 代码实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/*IE*/
.IE{
    position: absolute;
    top: 50%;
    left: 50%;
    width:200px;
    height:200px;
    transform: translate(-50%, -50%);
    border-radius:50%;
    background-image:
            radial-gradient(#fff 38%, transparent 38%),
            radial-gradient(#09C 0%, #09C 100%);

}
.IE:before{
    content: "";
    width:285px;
    height:122px;
    background:none;
    border-radius:100%;
    position:absolute;
    top:33px;
    left:-45px;
    margin:auto;
    box-shadow:
            inset 0 12px 0 13px  #09c,
            -35px -8px 0 -5px #fff;
    transform: rotate(-35deg);
}
.IE:after {
    content: "";
    width: 120px;
    height: 25px;
    background: #09c;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    margin: auto;
    box-shadow: 50px 23px 0 -2px #fff
}
  • safari

safari

利用渐变、border、旋转实现 ， 具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/*safari*/
.safari{
    position: absolute;
    top: 50%;left: 50%;
    width:200px; height:200px;
    transform: translate(-50%, -50%);
    border-radius:50%;
    border:5px solid #E8E8E8;
    box-shadow:
            -1px 3px 1px 2px #999,
            -1px 3px 1px 2px #999 inset;
    background-image:
            radial-gradient(transparent 30%,#fff 30%,#fff 34%, transparent 34%),
            linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),
            linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),
            linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),
            linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),
            linear-gradient(#1DE3FF 0%, #1F52EF 100%);
    background-size: 50% 50%,20px 2px,20px 2px,2px 20px,2px 20px,100%,100%;
    background-repeat:no-repeat;
    background-position:center center, 175px center,5px center,center 175px,center 5px,0 0;

}
.safari::before{
    content:"";
    position: absolute;
    top: 10px;left: 50%;
    border-radius:10px;
    border-bottom:100px solid rgba(255,255,255,.9);
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    transform-origin:center 90px;
    z-index:-1;
    transform:translate(-50%, 0%) rotate(40deg);
}
.safari::after{
    content:"";
    position: absolute;
    top: 10px;left: 50%;
    border-radius:10px;
    border-bottom:100px solid rgba(255,0,0,.9);
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    transform-origin:center 90px;
    transform:translate(-50%, 0%) rotate(220deg);
}
.safari:hover::before{
    transition:transform 1s;
    transform:translate(-50%, 0%) rotate(70deg);
}
.safari:hover::after{
    transition:transform 1s;
    transform:translate(-50%, 0%) rotate(250deg);
}
  • firefox

firefox

利用多重阴影实现 , 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/*firefox*/
.firefox{
    position: absolute;
    top: 50%;left: 50%;
    width: 200px;height:200px;
    transform: translate(-50%, -50%);
    border:8px solid #eee;
    border-radius:50%;
    overflow:hidden;
    background:#F48D00;
    box-shadow:0 0 2px 0 #999;
}
.firefox::before{
    content: "";
    width: 46px;
    height: 46px;
    background: #A4DFEF;
    border-radius: 100%;
    position: absolute;
    top: 90px;
    left: 50px;
    margin: auto;
    border: 1px solid #A4DFEF;
    box-shadow:
            -10px 0 0 5px rgba(164, 223, 239, .2),
            16px -60px 0 8px rgba(164, 223, 239, .2),
            -30px -50px 0 8px #F48D00,
            25px -38px 0 0px #A4DFEF,
            -30px -30px 0 12px #F48D00,
            15px -60px 0 8px #A4DFEF,
            33px 31px 0 -15px #A4DFEF,
            30px 17px 0 -13px #F48D00,
            20px -10px 0 0px #A4DFEF,
            -8px -0px 0 19px #F48D00,
            30px 17px 0 0px #A4DFEF,
            24px 30px 0 15px #F48D00,
            20px -6px 0 28px #A4DFEF,
            45px 10px 0 35px #F48D00,
            -5px -57px 0 8px #F48D00,
            20px -23px 0 45px #A4DFEF,
            -5px -80px 0 8px #A4DFEF,
            -30px -70px 0 8px #F48D00,
            -5px -57px 0 8px #F48D00,
            43px -11px 0 55px #F48D00,
            22px -39px 0 55px #A4DFEF;
}
.firefox::after{
    content: "";
    width: 0px;
    height: 2px;
    background: linear-gradient(90deg,#F48D00 75% ,#333 30% );
    background-size: 35px 35px;
    position: absolute;
    top: 50px;
    left: 73px;
    margin: auto;
    border: solid;
    border-width: 12px 0 15px 30px;
    border-color: #A4DFEF #fff #A4DFEF transparent;
    box-shadow: inset 0px 0 0 50px #333;
}
  • 搜狗

搜狗

利用文字、阴影实现 , 具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/*sougou*/
.sogou{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;height:200px;
    transform: translate(-50%, -50%);
    border:8px solid #fff;
    box-shadow: 2px 1px 2px 2px #ccc;
    border-radius:50%;
    overflow:hidden;
    background:#4DA0ED;
}
.sogou::before{
    content:"S";
    position: absolute;
    line-height: 185px;
    top:0;
    left:0;
    right:0;
    bottom:0;
    color:#fff;
    font-weight:600;
    font-size:320px;
    text-align:center;
    text-shadow:
            3px 0 0px #337FC4,
            -5px 0px 0px #CDE4F0,
            0px 8px 0px #387FBF;
    transform:rotate(2deg);
    z-index:-10;
    overflow:hidden;
}
  • 利用滤镜实现混合效果

filter-mix

利用 fliter:blur() 、filter:contrast() 实现 ， 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/*filter-mix*/
.filter-mix{
    position: absolute;
    top: 50%;left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;height: 200px;
    -webkit-filter:contrast(20);
    background:#fff;
}
.filter-mix::before{
    content:"";
    position: absolute;
    width:120px;
    height:120px;
    border-radius: 50%;
    background:#333;
    top:40px;
    left:0px;
    z-index:2;
    -webkit-filter:blur(6px);
    box-sizing:border-box;
    animation:filterBallMove 10s ease-out infinite;
    -webkit-animation:filterBallMove 10s ease-out infinite;
}
.filter-mix::after{
    content:"";
    position: absolute;
    width:80px;
    height:80px;
    border-radius: 50%;
    background:#3F51B5;
    top:60px;
    right:0px;
    z-index:2;
    -webkit-filter:blur(6px);
    animation:filterBallMove2 10s ease-out infinite;
    -webkit-animation:filterBallMove2 10s ease-out infinite;

}

@keyframes filterBallMove{
    50%{
        left:200px;
    }
}

@-webkit-keyframes filterBallMove{
    50%{
        left:200px;
    }
}

@keyframes filterBallMove2{
    50%{
        right:200px;
    }
}

@-webkit-keyframes filterBallMove2{
    50%{
        right:200px;
    }
}

装逼总结

怎么样，是不是颠覆了你对 CSS3 的认识？

实际上 CSS3 带给我们的远不止这些东西，没有做不到，只有想不到，只有你脑洞够大，各种黑科技、酷炫的 CSS 必然也是手到擒来~

虽然你给不了 CSS3 全部，但它却把全部给了你，骚年，加油吧~

end

参考文献

本文主要来源以下文章：

magicCss

CSS Secrets

对 CSS 感兴趣的同学可以去作者的 github 点个赞~

Donate comment here
-------------本文结束感谢您的阅读-------------